<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
        class="demo-ruleForm">
        <el-form-item label="username" prop="username">
            <el-input v-model="ruleForm.username" type="tex" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Password" prop="password">
            <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="login">
                Submit
            </el-button>
            <el-button>Reset</el-button>
        </el-form-item>
    </el-form>
    {{ username }}
</template>
<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import http from '@/utils/http'
import { getToken } from '@/api/index'
import { SetInfo } from '@/stores/UserInfo'
import { useRouter } from 'vue-router'
const router = useRouter()
const username = computed(() => {
    SetInfo().username
})
// const 
interface Fomtype {
    username: string
    password: string
}
const ruleForm = ref<Fomtype>({
    username: '',
    password: ''
})
const login = () => {
    ruleFormRef.value?.validate().then(async () => {
        const obj = {
            username: ruleForm.value.username,
            password: ruleForm.value.password
        }
        const res = await http.post('/api/login', obj)
        const { code, data: { accessToken } } = res.data
        if (code === 10000) {
            localStorage.setItem('token', accessToken)
            const id = accessToken
            const resToken = await getToken(id)
            const { data } = resToken.data
            console.log(data);

            SetInfo().SetUserInfo(data)

            router.push('/')
        }


    }).catch(() => {

    });
}
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<Fomtype>>({
    username: [
        { required: true, message: '输入用户名' }
    ],
    password: [
        { required: true, message: '输入密码', }
    ]
})
</script>